<!--订单详情-->
<template>
  <div class="order-details-wrap">
    <el-menu  >
      <h2 class="h1">订单详情</h2>
    </el-menu>
    <!-- 步骤条区域 -->
    <div class="order-details-steps">
      <el-steps :active="active" finish-status="success">
        <el-step title="买家下单" description="2018-05-24"></el-step>
        <el-step title="买家付款" description="2018-05-24"></el-step>
        <el-step title="商家发货" description="2018-05-24"></el-step>
        <el-step title="交易完成" description="2018-05-24"></el-step>
      </el-steps>

    </div>

    <!--  订单信息区域-->
    <div class="order-details-info">
      <el-row class="clear">
        <el-col :span="12">
          <div class="grid-content info-border info-box">
            <h4>订单信息</h4>
            <p>订单编号：<span>{{orderData[0].id}}</span></p>
            <p>订单类型：<span>普通订单</span></p>
            <p>付款方式：<span>{{orderData[0].paymentType}}</span></p>
            <p>买家：<span>{{orderData[0].name}}</span></p>
            <el-divider></el-divider>
            <p>配送方式：<span>快递配送</span></p>
            <p>收货信息：<span>{{orderData[0].address}}</span></p>
            <p>买家留言：<span>{{orderData[0].message}}</span></p>
            <div class="info-box-bottom">
              <p>微商城手机客户端</p>
              <p>用手机随地管理店铺</p>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content">
            <h4 style="padding: 15px 0">订单状态：买家已付款，等待商家发货</h4>
            <p style="padding: 5px 0 15px">买家已付款至有赞待结算账户，请尽快发货，否则买家有权申请退款</p>
            <el-button style="margin-top: 12px;" @click="next" :disabled="active === 4">发货 </el-button>  <span> 备注</span>
            <el-divider></el-divider>
            <p style="color: darkorange">有赞提醒：</p>
            <ul>
              <li>如果无法发货，请及时与买家联系并说明情况后进行退款；</li>
              <li>买家申请退款后，须征得买家同意后再发货，否则买家有权拒收货物；</li>
              <li>买家付款后超过7天仍未发货，将有权申请有赞客户介入发起退款维权；</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--  列表数据-->
    <div class="order-refund-list">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="image"
            label="商品图片"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="商品名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="currentunitPrice"
            label="单价（元）"
            width="180">
        </el-table-column>
        <el-table-column
            prop="quantity"
            label="数量">
        </el-table-column>
        <el-table-column
            prop="totalPrice"
            label="商品总价（元）">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {getSelectOrder, getSingleOrder} from "@/http/orderService";

export default {
  name: "OrderDetails",
  data() {
    return {
      active: 3,
      tableData: [],
      orderData: {},
    };
  },
  created(){
    this.init();
    this.order();
  },
  methods: {
    next() {
      this.active = 4;
    },
    async init(){
      const res = await getSingleOrder({
        "id":this.$route.query.id,
      })
      this.tableData = res.data.data
    },
    async order(){
      const res = await getSelectOrder({
        "id":this.$route.query.id,
        "paymentType":null,
        "from":null,
        "to":null,
        "page":"1",
        "limit":"9"
      })
      this.orderData = res.data.data
      console.log(this.orderData)
    },
},

}
</script>

<style lang="scss" scoped>
.h1{
  padding: 0 15px 20px;
  font-weight: 200;
}
.order-details-wrap {
  background-color: #fff;
  padding: 30px;
  .order-details-steps {
    width: 81%;
    margin: 10px auto;
    border: 1px solid #F6F6F6;
    padding: 20px 100px;
  }
  .order-details-info {
    width: 99%;
    margin: 16px auto;
    border: 1px solid #F6F6F6;
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .grid-content {
      border-left: 1px solid #ddd;
      min-height: 36px;
      padding: 20px;
      .grid-content h4 {
        padding: 15px;
      }
    }
    .info-border {

      .info-box-bottom {
        background-color: #F6F6F6;
        padding: 10px;
        margin: 20px auto;
        text-align: center;
      }
    }
    .row-bg {
      padding: 10px 0;
    }
  }
  .order-details-info p,li {
    padding: 5px;
    font-size: 14px;
  }
}
</style>